<template>
    <div class="f-header">
        <span class="logo">
            <el-icon class="mr-1"><ElemeFilled /></el-icon>
            李心雨编程
        </span>
        <el-icon class="icon-btn" @click="$store.commit('handleAsideWidth')">
            <Fold v-if="$store.state.asideWidth == '250px'"/>
            <Expand v-else/>
        </el-icon>
        
        <el-tooltip effect="dark" content="刷新" placement="bottom">
            <el-icon class="icon-btn" @click="handleRefresh"><Refresh /></el-icon>
        </el-tooltip>
       

        <div class="ml-auto flex items-center" style=" outline: unset;">
        <el-tooltip effect="dark"  content="全屏" placement="bottom" >    
            <el-icon class="icon-btn" @click="toggle"><FullScreen v-if="!isFullscreen" />
                <Aim v-else /></el-icon>
        </el-tooltip>
            <el-dropdown class="dropdown" @command="handleCommand">
            
        <!-- class可以直接写样式 -->
            <span class="el-dropdown-link text-light-50  flex justify-center items-center ">
                <!-- 头像(间隔4) -->
                  <el-avatar class="mr-2" :size="25  " :src="$store.state.user.avatar" />
                  {{$store.state.user.username}}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="rePassword">修改密码</el-dropdown-item>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
    </div>
    
   <form-drawer ref="formDrawerRef" title="修改密码" destroyOnClose @submit="onSubmit">
    <!-- 123 -->
    <!-- <el-drawer
        v-model="showDrader"
        title="修改密码" 
        size="45%"
        :close-on-click-modal="false"
        > -->

        
             <!-- 表单提交 ref="formRef"获取表单节点 -->
            <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" size="small">
                
                <!-- 绑定表单的验证规则 -->
                            <el-form-item prop="oldpassword" label="旧密码">
                                <!-- 绑定数据源才能进行输入 type="password"  解决铭文输入 ， show-password 美观样式--->
                            
                                <el-input type="password" v-model="form.oldpassword"  placeholder="请输入旧密码" show-password>
                                
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password" label="新密码">
                                <!-- 绑定数据源才能进行输入 type="password"  解决铭文输入 ， show-password 美观样式--->
                            
                                <el-input type="password" v-model="form.password"  placeholder="请输入新密码" show-password>
                                  
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="repassword" label="确认密码">
                                <!-- 绑定数据源才能进行输入 type="password"  解决铭文输入 ， show-password 美观样式--->
                            
                                <el-input type="password" v-model="form.repassword"  placeholder="请确认密码" show-password>
                                    
                                </el-input>
                            </el-form-item>
                          
            </el-form> 
    <!-- </el-drawer> -->
   </form-drawer>
</template>
<script setup>
import FormDrawer from '~/components/FormDrawer.vue'
import {logout,updatepassword} from '~/api/manager'
//定义给变量，获取变量值{}未定义默认变量
import {showModel,toast} from '~/composables/util'
import { useRouter } from "vue-router"
import {useStore} from 'vuex'
import { useFullscreen } from '@vueuse/core'
import { ref,reactive } from 'vue'
import { treeEmits } from 'element-plus/es/components/tree-v2/src/virtual-tree'
import {useRepassword ,useLogout } from '~/composables/useManager' 


const {
    formDrawerRef,
    form,
    rules,
    formRef,
    loading,
    onSubmit,
    openRePasswordForm,
} = useRepassword()

const{
    handleLogout
} = useLogout()
//参数：是否全屏切换全屏
const { isFullscreen, toggle } = useFullscreen()

const router = useRouter()
const store = useStore()


const handleRefresh = ()=>location.reload()
//表示输出变量
const handleCommand = (c)=>{
    // console.log(c);
    switch(c){
        case "logout":
            handleLogout();
            break;
        case "rePassword":
            // console.log('修改密码');
            // showDrader.value = true;
            openRePasswordForm()
            break;
    }
}
 

</script>
<style>
.f-header{
    /* 无边距宽度 */
    @apply flex items-center  bg-pink-400 text-light-50 fixed top-0 left-0 right-0;
    height: 64px;
    /* 表示层级高一点 */
    z-index: 1000; 

}

.logo{
    width: 250px;
    @apply flex justify-center items-center text-xl font-thin;
}
.icon-btn{
    /* 样式以分号结尾否则下面的样式失效 */
    @apply flex justify-center items-center;
    width: 42px;
    height: 64px;
    cursor: pointer;
}
.icon-btn:hover{
    @apply bg-pink-300;
}
#dropdown {
   @apply border-transparent;
}
/* 去除el-dropdown的聚焦小黑框 */
.el-dropdown-link:focus {
      outline: none;
    
    }
.f-header .dropdown{
    height: 64px;
    cursor: pointer;
    @apply flex justify-center items-center m-5;
}

</style>